<script lang="ts" setup>
import type { LocalBackgroundSetting } from '@/api/types/Setting.ts'
import { useBackgroundSettingStore } from '@/config/store/UseBackgroundSettingStore.ts'
import CommonBackgroundSettingFormItems from '@/page/Setting/component/CommonBackgroundSettingFormItems.vue'
import type { ArcoForm, ArcoFormRules } from '@/tool/ArcoFormTool.ts'
import { ObjectTool } from '@es-tool/core'
import { ref, watch } from 'vue'

const settingStore = useBackgroundSettingStore()

/* ---------------------------------------------------------------------------------------------- */
const formRef = ref<ArcoForm | null>()
const formData = ref<LocalBackgroundSetting>(ObjectTool.copy(settingStore.localSetting))
const formRule: ArcoFormRules<LocalBackgroundSetting> = {}

watch(() => formData.value, () => settingStore.setLocalValue(formData.value), { deep: true })

</script>

<template>
<a-form
        ref="formRef"
        :model="formData"
        :rules="formRule"
        auto-label-width
        class="background-setting-form"
        scroll-to-first-error
>

    <a-form-item field="enable" label="启用">
        <a-switch v-model="formData.enable" />
    </a-form-item>

    <template v-if="formData.enable">
        <CommonBackgroundSettingFormItems :form-data="formData" />
    </template>

</a-form>
</template>

<style lang="scss" scoped>
.background-setting-form {
    max-width: 1200px;
}
</style>
